<template>
  <div>
    <!-- 图片上传组件辅助 -->
    <el-upload
        multiple
        :action="uploadImgUrl"
        :headers="headers"
        :file-list="showList"
        list-type="picture-card"
        :on-success="afterUploadSuccess"
        :on-error="afterUploadFaild"
        :before-upload="beforeUpload"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        accept=“image/*”
    >
      <el-button size="small" type="primary" style="background-color: rgb(92, 170, 204)">点击上传</el-button>
    </el-upload>
    <div slot="tip" class="el-upload__tip my_upload_tip">
      支持图片（png、jpg、bmp，最大5M）个数不限。
    </div>
    <div slot="tip" class="el-upload__tip my_upload_tip">
      支持视频（mp4、avi、rmvb，最大20M）个数不限。
    </div>
    <el-dialog :close-on-click-modal="false" width="80%" :visible.sync="dialogVisible" :append-to-body="true">
      <img width="100%" :src="dialogUrl" alt v-if="dialogType === 'jpg'||dialogType === 'png'||dialogType === 'bmp'"/>
      <video :src="dialogUrl" v-if="dialogType === 'mp4'||dialogType === 'avi'||dialogType === 'rmvb'"
             controls="controls"
             width="100%">
        格式不支持
      </video>
    </el-dialog>
  </div>
</template>

<script>
import {getToken} from '@/utils/auth'

export default {
  props: {
    // 附件上传地址
    url: String,
    showList: Array,
    remark: String
  },
  data() {
    return {
      // 附件列表
      fileList: [],
      // 附件预览地址
      dialogUrl: '',
      // 附件放大框可见性
      dialogVisible: false,
      // 附件放大框可见性
      dialogType: '',
      // 下载和删除按钮有效性
      disabled: false,
      // 上传的图片服务器地址
      uploadImgUrl: process.env.VUE_APP_BASE_API_PIC + this.url,
      headers: {
        Authorization: 'Bearer ' + getToken()
      }
    }
  },
  watch: {
    url: function () {
      this.uploadImgUrl = process.env.VUE_APP_BASE_API_PIC + this.url
    }
  },
  mounted() {
    this.showListFun()
  },
  methods: {
    // 删除附件
    handleRemove(file, fileList) {
      for (let i = 0; i < this.fileList.length; i++) {
        let fileobj = this.fileList[i]
        debugger
        if (file.response.fileName === this.fileList[i].fileName) {
          debugger
          this.fileList.splice(i, 1)
          debugger
          break
        }
      }
    },
    // 图片预览
    handlePictureCardPreview(file) {
  debugger
      this.dialogUrl = file.url
      if( file.response==null||file.response==undefined){
        this.dialogType = file.attachmentType
        if (file.attachmentType === 'doc' || file.attachmentType === 'xls') {
          window.open(file.url)
        } else {
          this.dialogVisible = true
        }
      }else{
        this.dialogType = file.response.attachmentType
        if (file.response.attachmentType === 'doc' || file.response.attachmentType === 'xls') {
          window.open(file.url)
        } else {
          this.dialogVisible = true
        }
      }

    },
    // 附件上传前
    beforeUpload(file) {
      let fileType = file.type
      debugger
      if (fileType === 'image/jpeg' || fileType === 'image/png' || fileType === 'image/bmp') {
        if (file.size < 5 * 1024 * 1024) {
          return true
        } else {
          this.$message.error('上传的图片不能超过5M')
          return false
        }
      } else if (fileType === 'video/mp4' || fileType === 'video/avi' || fileType === 'video/rmvb') {
        if (file.size < 50 * 1024 * 1024) {
          return true
        } else {
          this.$message.error('上传的视频不能超过50M')
          return false
        }
      } else if (fileType === 'audio/mpeg') {
        if (file.size < 5 * 1024 * 1024) {
          return true
        } else {
          this.$message.error('上传的音频不能超过5M')
          return false
        }
      } else {
        this.$message.error('请上传符合规定的文件')
        return false
      }
    },
    // 附件上传成功后
    afterUploadSuccess(res, file, fileList) {

      // 如果上传成功
      if (res.code == 200) {
        // 插入图片  res.url为服务器返回的图片地址
        res.remark = this.remark;
        this.fileList.push(res)
      } else {
        for (let i = 0; i < fileList.length; i++) {
          let fileobj = fileList[i]
          if (file.uid == fileList[i].uid) {
            fileList.splice(i, 1)
            break
          }
        }
        this.$message.error('文件上传失败')
      }
    },
    // 附件上传失败
    afterUploadFaild() {
      // loading动画消失
      this.$message.error('文件上传失败')
    },
    showListFun() {
      let showList=this.showList;
      if (showList !== undefined && showList.length > 0) {
        for (let i in showList) {
          // let file = {}
          // file.fileName = this.showList[i].url.replace(process.env.VUE_APP_BASE_API, '')
          // file.attachmentType = this.showList[i].url.split('.')[this.showList[i].url.split('.').length - 1]
          // file.url = this.showList[i].url.replace(process.env.VUE_APP_BASE_API, '')
          // this.fileList.push(file)
          this.showList[i].url='https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'
        }
      }
    }
  },

}
</script>

<style scoped>
.my_upload_tip {
  color: red;
}
</style>
